<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <div id="send">
        <input type="text" value="小米10">
        <input type="text" value="1000">
        <input type="text"
            value="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a158766f79061d95624631384bf50a5d/5ab5c9ea15ce36d3dd608c672df33a87e950b104.jpg">
        <input type="text" value="小米10 ----阿斯顿发送到发送到 ">
        <input type="button">
    </div>

    <ul class="list">
        <!-- <li>
            <p></p>
            <img src="" alt="">
            <p></p>
            <p></p>
        </li> -->
    </ul>

    <script>

        // 请求商品列表
        function loadData() {
            let pagenum = 0;
            let pagesize = 20;
            let url = 'http://jx.xuzhixiang.top/ap/api/allproductlist.php'
            let uid = localStorage.getItem('uid')
            let token = localStorage.getItem('token')


            axios.get(url, {
                params: {
                    pagenum,
                    pagesize,
                    uid
                }
            }).then(res => {
                console.log(res.data.data);
                // 商品数组
                let arr = res.data.data;

                let html = '';

                //             pid: "367897"
                // pname: ""
                // pprice: "0.00"
                // pimg: ""
                // pdesc: ""
                arr.forEach(obj => {
                    html += ` <li>
                            <a href="item.html?id=${obj.pid}"><p>${obj.pname}</p></a>
                            <p>${obj.pid}</p>
                            <img src="${obj.pimg}" alt="">
                            <p>${obj.pdesc}</p>
                            <p>${obj.pprice}</p>
                            <button data-id="${obj.pid}" class="delete-btn">删除</button>
                        </li>`
                })

                let list = document.querySelector('.list')
                list.innerHTML = html;

                ///删除按钮的功能
                deleteProduct()






            })
        }

        // 删除按钮
        function deleteProduct() {
            //         接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
            //  接口请求方式：get
            //  接口参数：

            //         pid（必选）商品的id
            //         uid（必选）用户的id
            //         token（必选）登陆时候返回的token
            let deleteBtns = document.querySelectorAll('.delete-btn');
            for (let i = 0; i < deleteBtns.length; i++) {
                deleteBtns[i].onclick = function () {
                    //调用删除接口
                    let uid = localStorage.getItem('uid')
                    let token = localStorage.getItem('token')
                    // pid  按钮上 属性里面
                    let pid = this.getAttribute('data-id')
                    let url = 'http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php'
                    axios.get(url, {
                        params: {
                            uid, token, pid
                        }
                    }).then(res => {
                        console.log(res.data);
                        // 刷新页面 ， loadData  ，this.父元素 。remove（）
                        this.parentNode.remove()
                    })
                }
            }
        }

        // 发布商品
        function publishProduct() {
            let ipts = document.querySelectorAll('#send input')
            ipts[4].onclick = function () {
                let pname = ipts[0].value
                let pprice = ipts[1].value
                let pimg = ipts[2].value
                let pdesc = ipts[3].value
                let uid = localStorage.getItem('uid')

                let pAPI = 'http://jx.xuzhixiang.top/ap/api/goods/goods-add.php'
                axios.get(pAPI, { params: { pname, pprice, pimg, pdesc, uid } })
                    .then(res => {
                        console.log(res.data);
                        loadData()
                    })


            }
        }


        loadData()
        publishProduct()
    </script>

</body>

</html>